<template>
  <div class="jurisdiction">
    <div class="role-list">
      <h3>角色列表</h3>
      <div class="role-list-content">
        <div v-for="item in roleList" :key="item.id" class="role-list-item" :class="{ 'role-list-active': activId === item.id}" @click="clickRole(item)">{{ item.name }}</div>
      </div>
    </div>
    <div class="authority-list">
      <div class="authority-header">
        <h3>权限列表</h3>
        <el-button type="primary" size="small" @click="updateAuthority">保存</el-button>
      </div>
      <div class="authority-list-content">
        <vxe-table
          ref="treeTable"
          :key="key"
          resizable
          row-id="id"
          :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: false}"
          tree-config
          border
          highlight-hover-row
          highlight-current-row
          height="500"
          :data="list"
        >
          <vxe-table-column type="checkbox" field="checked" width="50" align="center" />
          <vxe-table-column tree-node field="name" min-width="300" title="名称" />
          <vxe-table-column field="desc" min-width="300" title="备注" />
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import { modifyByRoleId, getAuthorityById, getRoleList } from '@/api/cpPermission'
import { getMenu } from '@/api/public'
export default {
  data() {
    return {
      defaultSelecteRows: [],
      list: [],
      roleList: [],
      activId: '',
      roleCode: '',
      key: 0
    }
  },
  created() {
    this.getRole()
  },
  methods: {
    clickRole(item) {
      this.roleCode = item.code
      if (item.id !== this.activeId) {
        this.activId = item.id
        this.getAuthority()
      }
    },
    getList() {
      getMenu({ module: 'CP' }).then(res => {
        this.key++
        this.list = res
      })
    },
    getRole() {
      getRoleList({ pageNum: 1, pageSize: 10000, publishStatus: 1 }).then(res => {
        this.roleList = res.records
        this.activId = this.roleList[0].id
        this.getAuthority()
      })
    },
    getAuthority() {
      getAuthorityById(this.activId).then(res => {
        this.getList()
        this.defaultSelecteRows = res
      })
    },
    updateAuthority() {
      if (this.roleCode === 'Administrator') {
        this.$message.error('该账户不允许修改！')
        return false
      }
      const selectRecords = this.$refs.treeTable.getCheckboxRecords().map(item => item.id)
      modifyByRoleId({
        roleId: this.activId,
        permissionIds: selectRecords
      }).then(res => {
        this.$message.success('修改成功')
      })
    }
  }
}
</script>

<style lang="scss">
.jurisdiction {
    display: flex;
  background: #fff;
  padding: 10px;
  h3 {
    font-size: 16px;
    font-weight: 400;
  }
  .bunk-info-info-container{
    width: 100%;
    .el-card__body{
      width: 100%;
       display: flex;
    }
  }
  .role-list {
    margin-right: 20px;
    width: 200px;
    .bunk-info-list-card{
      width: 100%;
      .el-card__body{
        display: block;
      }
    }
    .role-list-content {
      background: #fff;
      // padding: 10px;
      height: 500px;
      max-height: 500px;
      overflow-y: auto;
    }
    .role-list-item {
      // padding: 10px;
      height: 26px;
      line-height: 26px;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      padding-left: 20px;
    }
    .role-list-item:hover {
      // color: #409eff;
      background-color: #F5F7FA;
    }
    .role-list-active {
      background: #edf6ff;
      color: #409eff;
    }
  }
  .authority-list {
    flex-grow: 1;
    .bunk-info-list-card{
      border-color: transparent;
      width: 100%;
      .el-card__body{
        display: block;
      }
    }
    .authority-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
